<template>
  <!-- 外层表格包裹元素 -->
  <section class="ces-table-page">
    <!-- 表格上面的操作按钮 -->
    <section class="ces-handle">
      <!-- 这里放置表格的操作按钮，比如新建，导出数据，导入数据 -->
      <section class="ces-handle" v-if='isHandle'>
        <el-button 
        v-for='item in tableHandles' 
        :size="item.size || size" :type="item.type" :icon='item.icon' :key="item.label"
        @click="item.handle()
        ">{{item.label}}</el-button>
      </section>
    </section>
    <!-- 表格组件 -->
    <section class="ces-table">
      <el-table
      :data="tableData"
      style="width: 100%"
      :border="isBorder"
      v-loading="loading"
      >
      <!-- 是否有前面的多选效果 -->
      <el-table-column type="selection" width="55" align="center" v-if="isSelection">
      </el-table-column>
      <!-- 是否显示前面的序号 -->
      <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50">
      </el-table-column>
      <!-- 表格的每一项：表格列数据 -->
      <template v-for="item in tableCols">
        <el-table-column
        :prop="item.prop"
        :label="item.label"
        :key="item.prop"
        :sortable="item.isSortable || false"
        v-if="!item.hidden"
        >
        <template #default="scope">
          <slot :name="item.slotname" :row="scope.row">
            {{ scope.row[item.prop] }}
          </slot>
        </template>
        </el-table-column>
      </template>
      </el-table>
    </section>
    <!-- 分页组件 -->
    <section class="ces-pagination"  v-if='isPagination'>
      <el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;'
        layout="prev, pager, next"
        background
        @current-change="currentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
        :total="1000">
      </el-pagination>
    </section>
  </section>
</template>

<script>
export default {
  name: "cesTable",
  props: {
    // 1. 表格的尺寸大小 mini,medium,small
    size:{type:String,default:'medium'},
    // 2. 是否需要带边框
    isBorder: {tyep:Boolean,default:true},
    // 3. 是否显示表格索引
    isIndex:{type:Boolean,default:false},
    indexLabel: {type:String,default:'序号'},
    // 4. 是否显示前面的多选效果
    isSelection:{type:Boolean,default:true},
    // 4. 是否显示分页
    isPagination:{type:Boolean,default:true},
    //    分页数据
    pagination:{ type:Object,default:()=>({pageSize:10,pageNum:1,total:0})},
    // 5. 加载动画
    loading: {type:Boolean,default:false},
    // 6. 表格数据，一般都是发请求过来的
    tableData: {type:Array,default:() => []},
    // 7. 表格列数据
    tableCols: {type:Array,default:() => []},
    // 8. 表格上面的操作
    isHandle:{type:Boolean,default:false},
    tableHandles:{type:Array,default:()=>[]},
  },
  methods: {
    /**
     * 点击页码的函数，page为传递过来的数字
     */
    currentChange(page) {
      console.log('你需要切换的页码为',page);
      this.$emit('currentChange',page);
    },
    /**
     * 点击上一页的函数
     */
    prevClick(page) {
      console.log('点击了上一页按钮',page);
      this.$emit('prevPageChange',page);
    },
    nextClick(page) {
      console.log('点击了下一页按钮',page);
      this.$emit('nextPageChange',page);
    }
  }
}
</script>
<style scoped>
/* you can write css here */
</style>